<template>
	<view class="qm-wrap" :style="{height:windowHeight+'px'}">
		<view class="qm-content">
			<canvas class='firstCanvas' :class="{'qm-bg':isShowBg}" canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
			 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
			</canvas>
		</view>
		<view class="qm-right-bar">
			<view class="qm-back qm-btn" @tap="goback()">返回</view>
			<view class="qm-title">添加手写签名</view>
			<view class="qm-clear qm-btn" @tap="clearClick()">重写</view>
			<view class="qm-ok qm-btn" @tap="saveform()">确定</view>
		</view>
	</view>
</template>

<script>
	// import config from "../../config.js";
	// import util from "../../commons/util.js";
	
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
	    success: function(res) {
	        canvasw = res.windowWidth;
	        canvash = res.windowHeight;
	    },
	})
	
	
	export default {
		data() {
			return {
				target_data:"",
				windowHeight:500,
				qianming:"",//签名url
				isShowBg:true,//显示背景提示
				templateAll:`
				<template>
	<view class="qm-wrap" :style="{height:windowHeight+'px'}">
		<view class="qm-content">
			<canvas class='firstCanvas' :class="{'qm-bg':isShowBg}" canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
			 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
			</canvas>
		</view>
		<view class="qm-right-bar">
			<view class="qm-back qm-btn" @tap="goback()">返回</view>
			<view class="qm-title">添加手写签名</view>
			<view class="qm-clear qm-btn" @tap="clearClick()">重写</view>
			<view class="qm-ok qm-btn" @tap="saveform()">确定</view>
		</view>
	</view>
</template>

<script>
	
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
	    success: function(res) {
	        canvasw = res.windowWidth;
	        canvash = res.windowHeight;
	    },
	})
	
	
	export default {
		data() {
			return {
				target_data:"",
				windowHeight:500,
				qianming:"",//签名url
				isShowBg:true,//显示背景提示
			}
		},
		onBackPress() {
			//#ifdef APP-PLUS
			 // 设置应用全屏
			 plus.navigator.setFullscreen(false);
			//#endif
		},
		onLoad(opt) {
			var that  = this;
			
			if (opt.target_data){
				that.target_data = opt.target_data;
			}
			//console.log(that.$api.prePage());
			//#ifdef APP-PLUS
			 // 设置应用全屏
			 plus.navigator.setFullscreen(true);
			//#endif
			let win = uni.getSystemInfoSync();
			this.windowHeight = win.windowHeight;
			
			_that = this;
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
			
		},
		methods: {
			goback(){
				uni.navigateBack();
				//#ifdef APP-PLUS
				 // 设置应用全屏
				 plus.navigator.setFullscreen(false);
				//#endif
			},
			//保存表单
			saveform: function() {
				var that = this;
					if (this.isEnd) {
						uni.showLoading({
							title:""
						
						});
						console.log("保存签名");
						//保存图片
						try{
							
						content.draw(false,
						uni.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							
							success: function(res) {
								//打印图片路径
								console.log('完成签名',res)
							
								//设置图片
								 let tmp_img = res.tempFilePath;
								
								//上传服务器
								uni.uploadFile({
									url: "/app/upload/upload",
									name: tmp_img,
									filePath: tmp_img,
									success:function(res){
										
										let img_url = JSON.parse(res.data).url;
										
										
										that.qianming = img_url;
										console.log(that.qianming);
										//设置上一面的签名
										
										that.$api.prePage().setQM(img_url,that.target_data);
										
										uni.navigateBack();
										uni.hideLoading();
										//#ifdef APP-PLUS
										 // 设置应用全屏
										 plus.navigator.setFullscreen(false);
										//#endif
								
									},
									fail(e) {
										//uni.hideLoading();
										that.$api.msg("上传错误：" + e)
									}
								})

							}
						}))
						
						}catch(e){
							uni.showToast({
								title: e
							});
						}
						
					} else {
						uni.showToast({
							title: '请先完成签名',
							icon: "none",
							duration: 1500,
							mask: true
						})
					}
				},
			
			// 画布的触摸移动开始手势响应
			start: function(event) {
				this.isShowBg= false;
				// console.log(event)
				console.log("触摸开始" + event.changedTouches[0].x)
				console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				//console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				touchs = [];
				// for (let i = 0; i < touchs.length; i++) {
				// 	touchs.pop()
				// }

			},

			// 画布的触摸取消响应
			cancel: function(e) {
				//console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				//console.log("长按手势" + e)
			},

			error: function(e) {
				console.log("画布触摸错误" + e)
			},

			//绘制
			draw: function(touchs) {
				//console.log(touchs[0],touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			}
		}
	}
< /script>

<style>
.qm-wrap{ display: flex; width:100%; height:100%;}
.qm-left-bar { width: 50px; border-right: 1px solid #ddd; background-color: #F5F5F5; height: 100%;}
.qm-content{ flex:1; height: 100%; position: relative;}
.qm-bg{ background:#FFFFFF url('') no-repeat center center;}
canvas {background-color: #FFFFFF;width:100%;height: 100%;}

.qm-right-bar{ overflow:hidden; width: 40px; background-color:#0A98D5; height:100%; display: flex; justify-content: space-between; flex-direction: column; position: relative}
.qm-title{ text-align: center; width:200px; transform: rotate(90deg); position:absolute; top:50%; left:-80px; z-index: 5; font-size: 18px; color:#eee;}

.qm-back{  transform: rotate(90deg); position:absolute; top:30px; left:-10px; z-index: 5; }
.qm-clear{   transform: rotate(90deg); position:absolute; bottom:100px; left:-10px; z-index: 5;}
.qm-ok{transform: rotate(90deg); position:absolute; bottom:30px; left:-10px; z-index: 5; }
.qm-btn{ width:60px; border-radius: 4px; border:1px solid #fff;text-align: center;font-size: 16px; color:#fff;}

</style>
				`
			}
		},
		onBackPress() {
			//#ifdef APP-PLUS
			 // 设置应用全屏
			 plus.navigator.setFullscreen(false);
			//#endif
		},
		onLoad(opt) {
			var that  = this;
			
			if (opt.target_data){
				that.target_data = opt.target_data;
			}
			//console.log(that.$api.prePage());
			//#ifdef APP-PLUS
			 // 设置应用全屏
			 plus.navigator.setFullscreen(true);
			//#endif
			let win = uni.getSystemInfoSync();
			this.windowHeight = win.windowHeight;
			
			_that = this;
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
			
		},
		methods: {
			goback(){
				uni.navigateBack();
				//#ifdef APP-PLUS
				 // 设置应用全屏
				 plus.navigator.setFullscreen(false);
				//#endif
			},
			//保存表单
			saveform: function() {
				this.addPlugin();
				return;
				var that = this;
					if (this.isEnd) {
						uni.showLoading({
							title:""
						
						});
						console.log("保存签名");
						//保存图片
						try{
							
						content.draw(false,
						uni.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							
							success: function(res) {
								//打印图片路径
								console.log('完成签名',res)
							
								//设置图片
								 let tmp_img = res.tempFilePath;
								
								//上传服务器
								uni.uploadFile({
									url: "/app/upload/upload",
									name: tmp_img,
									filePath: tmp_img,
									success:function(res){
										
										let img_url = JSON.parse(res.data).url;
										
										
										that.qianming = img_url;
										console.log(that.qianming);
										//设置上一面的签名
										
										that.$api.prePage().setQM(img_url,that.target_data);
										
										uni.navigateBack();
										uni.hideLoading();
										//#ifdef APP-PLUS
										 // 设置应用全屏
										 plus.navigator.setFullscreen(false);
										//#endif
								
									},
									fail(e) {
										//uni.hideLoading();
										that.$api.msg("上传错误：" + e)
									}
								})

							}
						}))
						
						}catch(e){
							uni.showToast({
								title: e
							});
						}
						
					} else {
						uni.showToast({
							title: '请先完成签名',
							icon: "none",
							duration: 1500,
							mask: true
						})
					}
				},
			
			// 画布的触摸移动开始手势响应
			start: function(event) {
				this.isShowBg= false;
				// console.log(event)
				console.log("触摸开始" + event.changedTouches[0].x)
				console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				//console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				touchs = [];
				// for (let i = 0; i < touchs.length; i++) {
				// 	touchs.pop()
				// }

			},

			// 画布的触摸取消响应
			cancel: function(e) {
				//console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				//console.log("长按手势" + e)
			},

			error: function(e) {
				console.log("画布触摸错误" + e)
			},

			//绘制
			draw: function(touchs) {
				//console.log(touchs[0],touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			}
		}
	}
</script>

<style>
.qm-wrap{ display: flex; width:100%; height:100%;}
.qm-left-bar { width: 50px; border-right: 1px solid #ddd; background-color: #F5F5F5; height: 100%;}
.qm-content{ flex:1; height: 100%; position: relative;}
.qm-bg{ background:#FFFFFF url('') no-repeat center center;}
canvas {background-color: #FFFFFF;width:100%;height: 100%;}

.qm-right-bar{ overflow:hidden; width: 40px; background-color:#0A98D5; height:100%; display: flex; justify-content: space-between; flex-direction: column; position: relative}
.qm-title{ text-align: center; width:200px; transform: rotate(90deg); position:absolute; top:50%; left:-80px; z-index: 5; font-size: 18px; color:#eee;}

.qm-back{  transform: rotate(90deg); position:absolute; top:30px; left:-10px; z-index: 5; }
.qm-clear{   transform: rotate(90deg); position:absolute; bottom:100px; left:-10px; z-index: 5;}
.qm-ok{transform: rotate(90deg); position:absolute; bottom:30px; left:-10px; z-index: 5; }
.qm-btn{ width:60px; border-radius: 4px; border:1px solid #fff;text-align: center;font-size: 16px; color:#fff;}

</style>
